<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item style="float: left">
                    <el-button @click="reload" size="mini" round>返回</el-button>
                </el-form-item>
                <el-form-item style="float: right">
                    <el-button type="primary" @click="showAdd" icon="el-icon-plus">创建考试</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--考试列表-->
        <el-table
                :data="examDetail"
                stripe border highlight-current-row
                style="width: 100%">
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="考试名字"
                    min-width="300px">
            </el-table-column>
            <el-table-column
                    prop="place"
                    label="考试地点"
                    min-width="100px">
            </el-table-column>
            <el-table-column
                    prop="examdate"
                    label="考试日期"
                    min-width="100px">
            </el-table-column>
            <el-table-column
                    prop="starttime"
                    label="开始时间"
                    min-width="100px">
            </el-table-column>
            <el-table-column
                    prop="finishtime"
                    label="结束时间"
                    min-width="100px">
            </el-table-column>
            <el-table-column
                    prop="nop"
                    label="参加考试人数"
                    min-width="100px">
            </el-table-column>
            <el-table-column
                    prop="operation"
                    label="操作"
                    min-width="200px">
                <template slot-scope="scope" >
                    <el-button size="mini"  icon="el-icon-edit" @click="showEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" @click="stumanage(scope.row.id)" icon="el-icon-edit" >学生管理</el-button>
                    <el-button size="mini" @click="GoTestTotal(scope.row.id)" icon="el-icon-edit" >成绩统计</el-button>
                    <el-button size="mini" @click="handleDel(scope.$index,scope.row)" icon="el-icon-edit" >删除</el-button>
                    <el-button size="mini" @click="GoMarkPaper(scope.row.id)" icon="el-icon-edit">批改试卷</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--创建/编辑考试-->
        <el-dialog :title="formTitle" :visible.sync="claimVisible" :close-on-click-modal="false">
            <el-form  :model="formdata" :rules="rules" label-position="left" label-width="80px" ref="examDetail">
                <el-form-item label="考试名字">
                    <el-input v-model="formdata.name" placeholder="请输入试考试名字"></el-input>
                </el-form-item>
                <el-form-item label="考试人数">
                    <el-input v-model="formdata.nop" placeholder="请输入试考试人数"></el-input>
                </el-form-item>
                <el-form-item label="考试地点">
                    <el-input v-model="formdata.place" placeholder="请输入试考试地点"></el-input>
                </el-form-item>
                <el-form-item label="考试日期">
                    <el-date-picker
                            v-model="formdata.examdate"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="考试时间" >
                    <el-date-picker
                            v-model="examTime"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="监考教师1">
                    <el-input v-model="formdata.invigilator1" placeholder="请输入监考教师"></el-input>
                </el-form-item>
                <el-form-item label="监考教师2">
                    <el-input v-model="formdata.invigilator2" placeholder="请输入监考教师"></el-input>
                </el-form-item>
                <el-form-item label="选择试卷">
                    <el-select v-model="formdata.exampaperid" placeholder="请选择">
                        <el-option
                                v-for="item in paperList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="claimVisible = false">取消</el-button>
                <el-button type="primary" v-on:click="add" :loading="submitLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--学生管理-->
        <el-dialog :title="formTitle" :visible.sync="stuVisible" :close-on-click-modal="false">
                <el-select  v-model="s" placeholder="请选择班级" style="width: 150px;float: left" @change="studentname(s)">
                    <el-option
                            v-for="item in classarr"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id" >
                    </el-option>
                </el-select>
                <br>
                <br>
                <br>
            <el-table
                    v-show="isshow"
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="number"
                        label="学号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"

                        show-overflow-tooltip>
                </el-table-column>
            </el-table>

            <br>
            <br>
            <br>

            <div slot="footer" class="dialog-footer">
                <el-button @click.native="stuVisible = false">取消</el-button>
                <el-button type="primary" v-on:click="addexamstu" :loading="submitLoading">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
    import moment from "moment"
    export default {
        data() {
            return {
                s:'',
                la:'',
                paperList:[],//存在考试试卷列表
                tableData:[
                    {
                        number:'',
                        name:'',
                        stuid:''
                    }
                ],

                tmp:[],
                multipleSelection: [],
                formTitle:"",
                submitLoading: false,
                examname:'',
                examTime:[],
                examDetail:[],
                studataList: [],
                formdata:{
                    name:'',
                    place:'',
                    examdate:'',
                    starttime:'',
                    finishtime:'',
                    exampaperid:'',
                    nop:'',
                    invigilator1:'',
                    invigilator2:'',
                    state:'1',
                    courseteachid:'',

                },
                teacherList:[],
                classarr:[],
                studentarr:[],
                name:'',
                total:'20',
                teacherid:'',
                courseid:'',
                courseteacherid:'',
                examid:'',
                user:{},
                morestu:{},
                claimVisible:false,
                stuVisible:false,
                 isshow:false,
                action: '', // 'add'-添加，'edit
                /*  datastu: this.generateData(),*/
                 value1:[],
                 rules:{
                     name: [
                         {required: true, message: '请输入试卷名', trigger: 'blur'}
                     ],
                 }
             };
         },
         methods:{
             showAdd: function () { //显示单个新增界面
                 this.formdata={};
                 this.claimVisible = true;
                 this.action = "add";
                 this.formTitle = '创建考试详情';
                 console.log(this.formdata);
             },
             GoTestTotal(num){
                 this.$router.push({path:'/gradetotal',query:{courseid:num}});
             },
             showEdit: function (index, row) { //显示编辑界面
                 console.log(this.formdata);
                 console.log(this.examDetail);
                 this.claimVisible = true;
                 this.formdata = Object.assign({}, row);
                 this.action = "edit";
                 this.formTitle = '编辑';
             },
             reload(){
                 this.$router.push({path:"/teachManage"});
             },
             handleDel: function (index, row) { //删除
                 this.$confirm('确认删除该记录吗?', '提示', {
                     type: 'warning'
                 }).then(() => {
                     console.log(row.id);
                     let para = {id: row.id};
                     console.log(para.id+"local");
                     this.$http.get('/api/exam/remove/' + para.id).then((res) => {
                         if (res.data.code === 0) {
                             this.$message({
                                 message: '删除成功',
                                 type: 'success'
                             });
                         } else {
                             this.$message({
                                 message: '删除失败',
                                 type: 'error'
                             });
                         }
                         this.getDataList();
                     });
                 }).catch(() => {
                     if (error) console.log(error);
                 });
             },
            stumanage(p){
                this.stuVisible=true;
                this.formTitle='选择考生';
                var j=1;
                var curclassarr=[];
                this.examid=p;
                curclassarr[0]=this.studataList[0].clazz;
                for(var i=0;i<this.studataList.length;i++) {
                    if (this.studataList[i].clazz.id === this.studataList[i + 1].clazz.id) {
                       i++;
                    }
                    else {
                      curclassarr[j++]=this.studataList[i].clazz;
                    }
                }
                this.classarr=curclassarr;
            },//学生管理
            studentname: function (r) {
                this.isshow = true;
                let curstudentarr =[],curstudentarr1=[],curstudentarr2=[],curexamid;
                console.log(this.studataList);
                for (var i = 0; i < this.studataList.length; i++) {
                    if (this.studataList[i].clazz.id === r)
                    {
                        curstudentarr[i]= this.studataList[i].user.realname;
                         curstudentarr1[i] =this.studataList[i].user.workid;
                         curstudentarr2[i]=this.studataList[i].user.id;
                    }
                }
                //this.examid=curexamid;
                this.studentarr = curstudentarr;
                //console.log(curstudentarr.length);
                 for(var i=0;i<this.studataList.length;i++)
                 {
                    var ta={
                        number:'',
                        name:'',
                        stuid:''
                    };
                     ta.number=curstudentarr1[i];
                     ta.name=curstudentarr[i];
                     ta.stuid=curstudentarr2[i];
                     this.tmp[i]=ta;
                 }
                this.tableData=this.tmp;
            },//分配学生
            handleSelectionChange(val){
                var curmorestu=[];
                for(var i=0;i<val.length;i++)
                {
                    var c={stuid:''};
                    c.stuid=val[i].stuid;
                    curmorestu[i]=c;
                }

                console.log(this.morestu);
                var kpointIds="";
                for(var i=0;i<curmorestu.length;i++){
                    kpointIds=kpointIds+curmorestu[i].stuid;
                    if(i!=curmorestu.length-1){
                        kpointIds+=",";
                    }
                }
                this.morestu=kpointIds;
                console.log(this.morestu);
            },
             addexamstu(){
                console.log(this.examid);
                console.log(this.morestu);
                 this.$http.post('api/attendexam/add/'+this.examid+'/'+this.morestu).then(res=>{
                     this.submitLoading = false;
                     if (res.data.code === 0) {
                         this.$message({
                             message: '添加成功',
                             type: 'success'
                         });
                         this.stuVisible = false;
                     } else {
                         this.$message({
                             message: '添加失败',
                             type: 'error'
                         });
                     }
                 }).catch((error)=>{
                     console.log(error);
                 })
             },
            getStudataList(){
                let para = {
                    courseteacherid:this.courseteacherid,
                };
                this.$http.post('/api/coursestudent/findStudentsByCondition', para).then(res => {
                    this.studataList = res.data.data;
                    this.la=this.studataList[0].clazz.id;
                    console.log(this.studataList);
                  //  console.log(this.studataList[0].clazz);
                }).catch((error) => {
                    if (error) console.log(error);
                });
            },
            getDataList(){
                this.$http.post('api/exam/findBycourseteachid/'+this.courseteacherid).then(res=>{
                console.log(res.data.data);
                //引入moment 前端过滤格式
                for(var i=0;i<res.data.data.length;i++){
                    res.data.data[i].starttime=moment(Date( res.data.data[i].starttime)).format('HH:mm:ss');
                    res.data.data[i].examdate=moment(Date( res.data.data[i].examdate)).format('YYYY-MM-DD');
                    res.data.data[i].finishtime=moment(Date( res.data.data[i].finishtime)).format('HH:mm:ss');
                }
                this.examDetail=res.data.data;
                console.log(this.examDetail);
                }).catch(error=>{
                        console.log(error);
            })
            },
            //创建/编辑考试
            add(){
                console.log(this.formdata);
                this.formdata.starttime=this.examTime[0];
                this.formdata.finishtime=this.examTime[1];
                this.formdata.courseteachid=this.courseteacherid;
                let apiPath = '';
                if (this.action === 'add') {
                    apiPath = 'api/exam/add';
                } else {
                    apiPath = 'api/exam/modify ';
                }
                this.$http.post(apiPath,this.formdata).then(res=>{
                    if(!res.data.code){
                        this.$message({
                            message: '保存成功',
                            type: 'success',
                        });
                        this.submitLoading=false;
                        this.claimVisible=false;
                    }else{
                        this.$message({
                            message: '保存失败',
                            type: 'error'
                        });
                    }
                    this.getDataList();
                    this.submitLoading=false;
                    this.claimVisible=false;
                }).catch(error=>{
                    console.log(error);
                });
                this.formdata='';
            },
             GoMarkPaper(num){
                 this.$router.push({path:'/markpaper',query:{courseid:num}});
             },
         },
        mounted(){
            //进入页面就加载登陆账户信息相关的课程ID
            this.courseid = this.$route.query.courseid;
            this.courseteacherid = this.$route.query.courseteacherid;
            this.getDataList();
            this.getStudataList();
           // this.generateData();
        }
    }
</script>

<style scoped>

</style>